﻿@page "/barcodes/data-matrix"

@using Syncfusion.Blazor.BarcodeGenerator
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample displays encoded numerals or text as an optical label using solid adjacent borders in an L-shape and two other borders consisting of alternating dark and light cells or modules. Within these borders are rows and columns of cells that encode information.</p>
</SampleDescription>
<ActionDescription>
   <p>This example shows how to display encoded text or numerical values as the label using the Barcode component. The `Type` property can be used to set the barcode type as data matrix. The data matrix encoding type can be set using the `encoding` property of the Barcode component and the data matrix size can be defined using the `size` property of the component.</p>
</ActionDescription>

<div class="control-section" style="width: 100%;height: 590px;">
    <div class="center">
        <div class="centercontrol">
            <SfDataMatrixGenerator Width="200" Height="150" Value="SYNCFUSION">
                <DataMatrixGeneratorDisplayText Visibility="false"></DataMatrixGeneratorDisplayText>
            </SfDataMatrixGenerator>
        </div>
    </div>
</div>

<style>
    .centercontrol {
        margin: auto;
        width: 50%;
        padding-left: 18%;
        height: 50%;
    }

    .allowedText {
        margin-left: 14px;
        margin-right: 17px;
        margin-top: 14px;
        width: auto;
        height: auto;
    }


    .center {
        margin-left: 14px;
        margin-right: 17px;
        margin-top: 14px;
        min-width: 280px;
        width: auto;
        border: 2px solid lightgray;
        min-height: 40%;
        padding-top: 35px;
    }
</style>

